<template>
  <div class="tabbar">
      <ul>
          <li v-for="(item,index) in routerList" :key="index" @click="switchTab(item.path)">
              <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
              <span :class="$route.path.includes(item.path) ? 'active' : ''">{{item.title}}</span>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'tabbar',
    data () {
        return {
            routerList:[
                {
                    title:'首页',
                    path:'/home',
                    active:'/images/home.png',
                    selected:'/images/home-select.png'
                },
                {
                    title:'分类',
                    path:'/list',
                    active:'/images/list.png',
                    selected:'/images/list-select.png'
                },
                {
                    title:'购物车',
                    path:'/cart',
                    active:'/images/cart.png',
                    selected:'/images/cart-select.png'
                },
                {
                    title:'我的',
                    path:'/my',
                    active:'/images/my.png',
                    selected:'/images/my-select.png'
                }
            ]
        }
    },
    methods: {
        switchTab(path){
            // 判断是否点击了同一个路由
            if(this.$route.path == path) return
            this.$router.replace(path);
        }
    }

}
</script>

<style scoped>
.tabbar{width: 100%;height: 1.6rem;background: #fff;z-index: 999;align-items: center;box-shadow:0 -1px 10px 1px #ddd;}
.tabbar ul{display: flex;justify-content: space-around;width: 100%;height: 100%;}
.tabbar ul li{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.tabbar ul li img{width:0.82666rem;height: .826667rem;}
.tabbar ul li span{font-size: 16px;}
.active{color:#f00}
</style>